<template>
    <div class="comment-item-container">
        <div class="commentLayout">
            <div class="commentLayout-avatar">
                <div class="commentAvatar" :style="getProfileImage(commentItem.userId)"></div>
            </div>
            <div class="commentLayout-main">
                <div class="commentLayout-header">
                    <a class="commentLayout-account">{{commentItem.userName}}</a>
                    <span class="i-annotation-pill i-annotation-pill--team" v-if="ownerId == commentItem.userId">Campaigner</span>
                    <span class="commentNote">{{commentItem.createTime |dateFormat}}</span>
                </div>
                <div class="commentLayout-text">
                    <p>{{commentItem.content}}</p>
                </div>
                <div class="commentLayout-reply commentLayout" v-if="commentItem.replyList" v-for="(item, index) in commentItem.replyList" :key="index">
                    <div class="commentLayout-avatar">
                        <div class="commentAvatar" :style="getProfileImage(item.userId)"></div>
                    </div>
                    <div class="commentLayout-main">
                        <div class="commentLayout-header">
                            <a class="commentLayout-account">{{item.userName}}</a>
                            <span class="i-annotation-pill i-annotation-pill--team"
                                  v-if="ownerId == item.userId">Campaigner</span>
                            <span class="commentNote">{{item.createTime |dateFormat}}</span>
                        </div>
                        <div class="commentLayout-text">{{item.content}}</div>
                    </div>

                </div>
                <div class="commentLayout-replyForm commentReplyForm" v-if="canReply">
                    <textarea class="commentReplyForm-field" v-model="replyContent"
                              placeholder="Write a reply..."></textarea>
                    <div class="commentReplyForm-actions">
                        <span class="commentReplyForm-counter">500 of 500</span>
                        <button id="reply_button" class="i-cta-1 i-cta-1--30px" @click="addNewReply">
                            Reply
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    import Constants from "@/env"
    import {saveReply} from "@/api/comment";
    import {mapState, mapMutations} from 'vuex'
    import {saveUserLog} from '@/api/log'
    import {apiGetUserName} from '@/api/login'
    export default {
        name: "CommentItem",
        props: {
            commentItem: {},
            ownerId: '',
            campaignId: '',
            canReply: {
                default: false
            },
            listIndex: {}
        },
        data() {
            return {
                userName: '',
                replyName: '',
                replyContent: ''
            }
        },
        mounted() {
        },
        filters: {
            dateFormat(time) {
                return moment(time).startOf('mimute').fromNow()
            }
        },
        methods: {
            getProfileImage(userId) {
                var imagePath = Constants.ICON_HOST + userId

                return `background-image: url('${imagePath}');background-size: 100% 100%;
                background-repeat: no-repeat;`
            },
            getUserNameById(userId) {

                var that = this

                userId = userId || ""
                if ("" == userId) {
                    that.userName = "Anonymity"
                    return
                }

                var that = this
                this.$store.dispatch('getUserName', userId).then((res) => {
                    that.userName = res.userName
                }).catch((err) => {
                })

            },
            addNewReply() {

                var tempInput = this.replyContent || ""
                if ("" == tempInput) {

                    this.$message.error("content can't be empty")
                    return

                }


                var that = this
                var newReply = {
                    userId: this.userId,
                    campaignId: this.campaignId,
                    replyId: this.commentItem.id,
                    content: this.replyContent,
                    userName: this.name
                }


                var tip = {
                    operation: "Rely to comments",
                    params: JSON.stringify({"userId": this.userId, "campaignId": this.campaignId,"replyId": this.commentItem.id})

                }

                saveUserLog(tip);


                // that.$parent.commentList.unshift(newReply)
                saveReply(newReply).then((res) => {
                    newReply.id = res.commentId
                    newReply.replyContent = that.commentItem
                    that.replyContent = ""
                    that.$emit("addCommentHandler", newReply, this.listIndex)
                    // that.$parent.$parent.$parent.commentList.unshift(newReply)
                    that.$message.success("success")
                })
            }
        },
        computed: {
            /*computeUserName() {
                var that = this
                return function (userId) {
                    return that.getUserNameById(userId)
                }
            }*/

            ...mapState({
                'userId': state => state.user.userId,
                'name': state => state.user.name,
            }),
        },
    };
</script>

<style scoped lang="scss">
    .comment-item-container {
        border: 1px solid #dddddd;
        padding: 20px;
        background-color: white;
        margin-bottom: 26px;
        .commentLayout {
            display: flex;
            .commentLayout-avatar {
                margin-right: 20px;
                .commentAvatar {
                    width: 50px;
                    height: 50px;
                    border-radius: 25px;
                    -moz-border-radius: 25px;
                    vertical-align: middle;
                }
            }
            .commentLayout-main {
                box-flex: 1;
                -webkit-flex: 1;
                -moz-flex: 1;
                -ms-flex: 1;
                flex: 1;
                position: relative;
                .commentLayout-seeMoreReplies {
                    margin: 20px 0;
                    .commentAction {
                        font-family: "Benton Sans", "Helvetica", "sans-serif";
                        font-size: 12px;
                        font-weight: bold;
                        line-height: 18px;
                        color: #E51075;
                        text-decoration: none;
                    }
                }
                .commentLayout-reply {
                    border-bottom: 1px solid #ffffff;
                    background: #f5f5f5;
                    padding: 20px;
                    display: box;
                    display: -webkit-flex;
                    display: -moz-flex;
                    display: -ms-flexbox;
                    display: -ms-flex;
                    display: flex;
                }
                .commentLayout-replyForm {
                    margin-top: 20px;
                    margin-bottom: 50px;
                    .commentReplyForm-field {
                        height: 80px;
                        margin-top: 20px;
                        resize: vertical;
                    }
                    textarea {
                        background-color: #ffffff;
                        border: 1px solid #dddddd;
                        width: 100%;
                        padding: 5px 15px;
                        resize: vertical;
                    }
                    .commentReplyForm-actions {
                        margin-top: 10px;
                        display: box;
                        display: -webkit-flex;
                        display: -moz-flex;
                        display: -ms-flexbox;
                        display: -ms-flex;
                        display: flex;
                        box-pack: justify;
                        -ms-flex-pack: justify;
                        -webkit-justify-content: space-between;
                        -moz-justify-content: space-between;
                        -ms-justify-content: space-between;
                        justify-content: space-between;
                        box-align: center;
                        -ms-flex-align: center;
                        -webkit-align-items: center;
                        -moz-align-items: center;
                        -ms-align-items: center;
                        align-items: center;
                        .commentReplyForm-counter {
                            font-family: "Benton Sans", "Helvetica", "sans-serif";
                            font-size: 12px;
                            font-weight: normal;
                            line-height: 18px;
                            font-style: italic;
                            color: #6a6a6a;
                        }
                        .i-cta-1--30px {
                            font-family: "Benton Sans", "Helvetica", "sans-serif";
                            font-weight: bold;
                            font-size: 12px;
                            line-height: 12px;
                            text-transform: uppercase;
                            letter-spacing: 1px;
                            padding: 7px 13px;
                            min-height: 30px;
                            background-color: #E51075;
                            border: 2px solid #E51075;
                            border-radius: 2px;
                            color: #ffffff;
                            text-align: center;
                        }
                    }
                }
            }
        }
        .commentLayout-header {
            margin-bottom: 10px;
            display: box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: -ms-flex;
            display: flex;
            box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            align-items: center;
            * {
                margin-right: 10px;
            }
            .commentLayout-account {
                max-width: 200px;
                font-family: "Benton Sans", "Helvetica", "sans-serif";
                font-weight: bold;
                font-size: 14px;
                line-height: 20px;
                color: #2a2a2a;
                margin-right: 10px;
            }
            .i-annotation-pill--team {
                font-family: "Benton Sans", "Helvetica", "sans-serif";
                font-size: 12px;
                font-weight: normal;
                line-height: 18px;
                color: white;
                background-color: #0EB4b6;
                padding: 0 10px;
            }
            .commentNote {
                font-family: "Benton Sans", "Helvetica", "sans-serif";
                font-size: 12px;
                font-weight: normal;
                line-height: 18px;
                color: #a8a8a8;
            }
        }
        .commentLayout-text {
            font-family: "Benton Sans", "Helvetica", "sans-serif";
            font-size: 16px;
            font-weight: normal;
            line-height: 24px;
            color: #2a2a2a;
            word-break: break-word;
            p {
                margin: 0 0 10px;
            }
        }
    }
</style>